<template>
  <div class="detail-wrapper">
    <div class="first-step">
      <div class="cover">
        <img :src="'http://cdn1.ielts.group/' + data.cover_name" alt />
      </div>
      <div class="book-data">
        <div class="title">{{data.book_name}}</div>
        <div class="author">作者：{{data.author}}</div>
        <div class="publish-time">出版时间：{{data.publishing_time}}</div>
        <div class="publish-time">{{data.publishing_house}}</div>
        <div class="tag-area">
          <!-- <van-tag color="#EFEFEF" text-color="#8E95A0">阅读</van-tag>
          <van-tag color="#EFEFEF" text-color="#8E95A0">刘洪波</van-tag>-->
        </div>
      </div>
    </div>
    <div class="second-step">
      <div class="second-step-title">推荐指数</div>
      <div class="left">
        <div class="score">{{data.recommend_score}}</div>
        <div class="star-area">
          <van-rate
            :value="data.recommend_score"
            :size="16"
            allow-half
            color="#FFA722"
            void-color="#D4D4D4"
            void-icon="star"
            readonly
            @change="starChange"
          />
        </div>
      </div>
      <div class="right">
        <van-button plain color="#FFA722" round size="small" @click="addToDakaList">
          <span class="button-text">&nbsp;&nbsp;添加至打卡列表&nbsp;&nbsp;</span>
        </van-button>
        <div class="study-count">
          <i class="thumbs-up" />
          {{data.studying_count}}人正在学习
        </div>
      </div>
    </div>
    <div class="third-step">
      <div class="third-step-title">简介</div>
      <div class="third-step-content">{{data.introduce}}</div>
    </div>
    <div class="turn-to-official-accounts">
      <van-button round color="#FFA722">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span style="color: white;">跳转至公众号</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </van-button>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>

<script>
import cloudHandler from "../../cloud/index";
import Toast from "../../../static/vant/toast/toast";

export default {
  data() {
    return {
      starValue: 4,
      data: {
        author: "--",
        book_name: "--",
        cover_name: "9分达人雅思口语真题还原及解析.jpg",
        introduce:
          "《九分达人雅思口语真题还原及解析》分九个章节：第一章：详细分析了雅思口语考试的评分标准、提出了英语口语学习的三个步骤、并划分了雅思口语考试的话题范围，为考生提供了一个明确的备考方向。第二章：总结了雅思考生备考时所需要积累的句型、词汇和经典句子。第三章-第五章：分别针对雅思口语考试的三个部分进行拆分讲解，并为每一部分中不同类型的题目提供了分析思路和答题策略。第六章：为雅思口语题库总结，按照八大核心场景的划分标准分门别类地收录了雅思口语考试真题。另外，还提供了详细的题目分析和参考答案。第七章-第八章：归纳了雅思考生常用词汇和替换词汇，总结出了剑8听力中的口语背诵经典，为考生提供更多选择。第九章：解答了考生关于雅思口语考试的各种疑问。",
        publishing_house: "--",
        publishing_time: "--",
        recommend_score: 0,
        studying_count: 0,
        url: ""
      }
    };
  },
  computed: {},
  methods: {
    starChange() {
      // todo
    },
    getData(id) {
      cloudHandler
        .getCardDetail(id)
        .then(res => {
          this.data = res.body.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    addToDakaList() {
      cloudHandler
        .addCardInYourPocket(this.data._id)
        .then(res => {
          console.log("成功！");
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: {},
  onLoad(opt) {
    Toast.loading({
      mask: true,
      message: "加载中..."
    });
    this.getData(opt.id);
  }
};
</script>

<style lang="less" scoped>
.detail-wrapper {
  background: rgba(247, 248, 250, 1);
  min-height: 100vh;
  padding: 21px 24px 21px 24px;
  .first-step {
    margin-bottom: 21px;
    display: flex;
    .cover {
      width: 92px;
      height: 124px;
      margin-right: 18px;
      img {
        box-shadow: 0px 3px 7px 0px rgba(92, 110, 146, 1);
        max-width: 100%;
        max-height: 100%;
        border-radius: 6px;
        object-fit: cover;
      }
    }
    .book-data {
      .title {
        font-size: 16px;
        color: rgba(61, 71, 92, 1);
      }
      .author {
        font-size: 12px;
        color: rgba(61, 71, 92, 1);
        line-height: 17px;
        margin-top: 2px;
      }
      .publish-time {
        font-size: 12px;
        color: #8e95a0;
        margin-top: 6px;
      }
      .tag-area {
        margin-top: 12px;
      }
    }
  }
  .second-step {
    background: #fff;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 3px 6px 0px rgba(212, 212, 212, 0.5);
    display: flex;
    padding: 36px 24px 20px 16px;
    .second-step-title {
      width: 115px;
      height: 21px;
      line-height: 21px;
      text-align: right;
      color: #fff;
      font-size: 12px;
      position: absolute;
      padding-right: 17px;
      box-sizing: border-box;
      left: -5px;
      top: 10px;
      background: url("http://cdn1.ielts.group/%E5%BD%A9%E5%B8%A6%402x.png")
        center center no-repeat;
      background-size: 100% 100%;
    }
    .left {
      width: 106px;
      .score {
        font-size: 24px;
        font-weight: 500;
        color: rgba(61, 71, 92, 1);
        line-height: 33px;
        text-align: center;
      }
    }
    .right {
      width: 100%;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .button-text {
        color: #ffa722;
      }
      .study-count {
        font-size: 9px;
        color: rgba(61, 71, 92, 1);
        line-height: 13px;
        margin-top: 8px;
        display: flex;
        align-items: center;
        .thumbs-up {
          width: 16px;
          height: 16px;
          display: inline-block;
          background: url("http://cdn1.ielts.group/%E6%8E%A8%E8%8D%90%403x.png")
            center center no-repeat;
          background-size: cover;
          margin-right: 6px;
        }
      }
    }
  }
  .third-step {
    margin-top: 21px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 6px 0px rgba(212, 212, 212, 0.5);
    border-radius: 8px;
    padding: 19px 23px 19px 23px;
    .third-step-title {
      margin-bottom: 11px;
      font-size: 16px;
      color: rgba(61, 71, 92, 1);
      line-height: 22px;
    }
    .third-step-content {
      font-size: 12px;
      color: rgba(61, 71, 92, 1);
      line-height: 24px;
    }
  }
}
.turn-to-official-accounts {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
